<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>Ayame DataChannel Sample</title>
        <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v3.0.1/dist/mini-default.min.css">
    </head>
    <body>
      <header class="sticky row">
        <h4>Ayame DataChannel Sample</h4>
      </header>
      <div>
        <p>ルームID
        <input id="roomIdInput" type="text" value=""></input>
        </p>
        <p>クライアントID
        <input id="clientIdInput" disabled type="text" value=""></input>
        </p>
        <button onclick="startConn();">接続</button>
        <button onclick="disconnect();">切断</button>
        <p> 送信するメッセージ
        <input id="sendDataInput" type="text" value="🐶"></input>
        </p>
        <button onclick="sendData();">送信</button>
        <p> 受信したメッセージ </p>
        <textarea style="height:200px;" id="messages" disabled type="text" value=""></textarea>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/@open-ayame/ayame-web-sdk@2020.3.0/dist/ayame.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.7.0/qs.min.js"></script>
      <script src="./main.js"></script>
      <script type="text/javascript">
        const options = Ayame.defaultOptions;
        options.clientId = clientId ? clientId : options.clientId;
        if (signalingKey) {
          options.signalingKey = signalingKey;
        }
        let conn;
        const disconnect = () => {
          if (conn) {
            conn.disconnect();
          }
        }
        let dataChannel = null;
        const label = 'dataChannel';
        const startConn = async () => {
          conn = Ayame.connection(signalingUrl, roomId, options, true);
          conn.on('open', async (e) => {
            dataChannel = await conn.createDataChannel(label);
            if (dataChannel) {
              dataChannel.onmessage = onMessage;
            }
          });
          conn.on('datachannel', (channel) => {
            if (!dataChannel) {
              dataChannel = channel;
              dataChannel.onmessage = onMessage;
            }
          });
          conn.on('disconnect', (e) => {
            console.log(e);
            dataChannel = null;
          });
          await conn.connect(null);
        };
        const sendData = () => {
          const data = document.querySelector("#sendDataInput").value;
          if (dataChannel && dataChannel.readyState === 'open') {
            dataChannel.send(data);
          }
        };
        document.querySelector("#roomIdInput").value = roomId;
        document.querySelector("#clientIdInput").value = options.clientId;

        function onMessage(e) {
          const messages = document.querySelector("#messages").value;
          newMessages = messages ? (messages + '\n' + e.data) : e.data;
          document.querySelector("#messages").value = newMessages;
        }
      </script>
  </body>
</html>
